import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class index extends Component {

    // 对接收的props进行类型、必要性的限制
    static propTypes = {
        id: PropTypes.string.isRequired,
        todo: PropTypes.object.isRequired,
        switchDone: PropTypes.func.isRequired,
        deleteTodo: PropTypes.func.isRequired
    }

    // 任务状态切换
    switchDone = (id) => {
        return () => {
            const { checked } = this.checkbox
            this.checkbox.checked = !checked
            this.props.switchDone(id, !checked)
        }
    }

    deleteTodo = (id) => {
        return () => {
            this.props.deleteTodo(id)
        }
    }

    render() {
        const { id, todo } = this.props
        return (
            <div className="item" onClick={this.switchDone(id)}>
                <input ref={c => this.checkbox = c} type="checkbox" checked={todo.done} onChange={() => { }} />
                <span className="desc">{todo.name}</span>
                <button className="option" onClick={this.deleteTodo(id)}>删除任务</button>
            </div>
        )
    }
}
